<template>
  <div style="padding:  30px;">
     <el-row :gutter="20" :class="$style.header">
      <el-col :span="4">
        <span style="width:29%;text-align:right;float:left;line-height:36px;">类别：</span>
        <el-select v-model="terms.uType.value" placeholder="请选择" style="width:55%">
          <el-option v-for="item in terms.uType.opts" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <span style="width:29%;text-align:right;float:left;line-height:36px;">用户名：</span>
        <el-input v-model="terms.uname" placeholder="请输入用户名" style="width:55%" @keyup.enter.native="handleSearch"></el-input>
      </el-col>
      <el-col :span="4">
        <span style="width:29%;text-align:right;float:left;line-height:36px;">手机号：</span>
        <el-input v-model="terms.mobile" placeholder="请输入手机号" style="width:55%" @keyup.enter.native="handleSearch"></el-input>
      </el-col>
      <el-col :span="4">
        <span style="width:29%;text-align:right;float:left;line-height:36px;">ID：</span>
        <el-input v-model="terms.uid" placeholder="请输入ID" style="width:55%" @keyup.enter.native="handleSearch"></el-input>
      </el-col>
      <el-col :span="5">
        <span style="width:29%;text-align:right;float:left;line-height:36px;">回款日期：</span>
        <el-date-picker v-model="terms.timeDur" type="daterange" placeholder="选择日期范围" style="width:55%" @change="handleSearch">
        </el-date-picker>
      </el-col>
    </el-row>
    <el-row :gutter="20" :class="$style.header">
      <el-col :span="4">
      <span style="width:29%;text-align:right;float:left;line-height:36px;">日期：</span>
        <el-select v-model="terms.HKtype.value" placeholder="请选择" style="width:55%">
          <el-option v-for="item in terms.HKtype.opts" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-checkbox v-model="terms.initChecked" @change="handleSearch">备选项</el-checkbox>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-col>
    </el-row>
    <el-table :data="capital" border style="width: 100%">
      <el-table-column  label="收藏" :min-width="50" align="center">
        <template slot-scope="scope" >
          <img src="./components/images/heart.png" @click="CollectionDialog(scope.row.id)" style="cursor:pointer">
        </template>
      </el-table-column>
      <el-table-column  label="收藏客户" :min-width="50" align="center">
        
      </el-table-column>
      <el-table-column  label="备注" :min-width="50" align="center">
        <template slot-scope="scope" >
          (<span @click="remarkDialog(scope.row.id)" style="cursor:pointer;" :class="scope.row.whcs && $style.red">
          {{(scope && scope.row ? scope.row.whcs : 0 ) }}
          </span>)次
        </template>
      </el-table-column>
      <el-table-column  label="用户名" :min-width="50" align="center">
        <template slot-scope="scope" >
          <span :class="$style.click" @click="$router.push(`/vip-manage/detail/${scope.row.id}/jbxx`)">{{scope.row.cU_ser}}</span>
        </template>
      </el-table-column>
      <el-table-column  label="ID" :min-width="100" align="center">
        <template slot-scope="scope" >
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column  label="贵州银行" :min-width="100" align="center">
        <template slot-scope="scope" >
          <span>{{scope.row.usrcustid}}</span>
        </template>
      </el-table-column>
      <el-table-column  label="真实姓名" :min-width="100" align="center">
        <template slot-scope="scope" >
          <span>{{scope.row.cName}}</span>
        </template>
      </el-table-column>
      <el-table-column  label="注册时间" :min-width="100" align="center">
        <template slot-scope="scope" >
          <span>{{scope.row.tDate}}</span>
        </template>
      </el-table-column>
      <el-table-column  label="回款时间" :min-width="100" align="center">
        <template slot-scope="scope" >
          <span>{{scope.row.hksj}}</span>
          <div>
            <span v-show="scope.row.srhk">首次</span>
            <span v-show="scope.row.mrhk">最后</span>
          </div>
          
        </template>
      </el-table-column>
      <el-table-column  label="回款金额" :min-width="100" align="center">
        <template slot-scope="scope" >
          <span>{{scope.row.ftze}}</span>
        </template>
      </el-table-column>
      <el-table-column  label="手机号码" :min-width="100" align="center" >
        <template slot-scope="scope" >
          <span @click="callFn(scope.row.cMtel)">{{scope.row.cMtel}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column v-for="(item,index) in capitalTit" :key="index" :prop="item.prop" :label="item.label" :min-width="item.width">
          
      </el-table-column> -->
    </el-table>
    <div style="margin: 30px 0;">
      <!-- <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total">
      </el-pagination> -->
      第{{currentPage}}页
      <span :class="$style.yema" @click="prev">上一页</span>
      <span :class="$style.yema" @click="next">下一页</span>
    </div>
    <el-dialog
    :visible.sync="remarkData.dialog"
    size="small">
      <div :class="$style.remarkBox">
        <div :class="$style.title">客户意向</div>
        <div :class="$style.detail">
          <div :class="$style.tit">客户状态</div>
            <el-radio-group v-model="remarkData.situation.value" >
              <el-radio style="margin-top:20px;margin-left:20px;" :label="item.value" v-for="(item,index) in remarkData.situation.options" :key="index">{{item.label}}</el-radio>
            </el-radio-group>
        </div>
        <div :class="$style.detail">
          <div :class="$style.tit">客户性格</div>
            <el-radio-group v-model="remarkData.character.value" >
              <el-radio style="margin-top:20px;margin-left:20px;" :label="item.value" v-for="(item,index) in remarkData.character.options" :key="index">{{item.label}}</el-radio>
            </el-radio-group>
        </div>

        <div :class="$style.title">客户情况</div>
        <div :class="$style.detail">
          <div :class="$style.tit">客户偏好</div>
          <el-checkbox-group v-model="remarkData.preference.value">
            <el-checkbox style="margin-top:20px;margin-left:20px;" v-for="(item,index) in remarkData.preference.options" :label="item.value" :key="index">{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div :class="$style.detail">
          <div :class="$style.tit">客户反馈</div>
          <el-checkbox-group v-model="remarkData.feedback.value">
            <el-checkbox style="margin-top:20px;margin-left:20px;" v-for="(item,index) in remarkData.feedback.options" :label="item.value" :key="index">{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div :class="$style.detail">
          <div :class="$style.tit">了解网贷平台的途径</div>
          <el-checkbox-group v-model="remarkData.channel.value">
            <el-checkbox style="margin-top:20px;margin-left:20px;" v-for="(item,index) in remarkData.channel.options" :label="item.value" :key="index">{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div :class="$style.detail">
          <div :class="$style.tit">流失原因</div>
          <el-checkbox-group v-model="remarkData.reason.value">
            <el-checkbox style="margin-top:20px;margin-left:20px;" v-for="(item,index) in remarkData.reason.options" :label="item.value" :key="index">{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div :class="$style.title">备注</div>
        <div :class="$style.detail">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            :maxlength="200"
            v-model="remarkData.remarkCont">
          </el-input>
        </div>
        <div :class="$style.title">维护历史</div>
        <div :class="$style.detail" style="height:50px;overflow-y:scroll;border-bottom: 1px solid #dddfe6">
          <div :class="$style.history" v-for="(item,index) in remarkData.history" :key="index">({{item.tDate}}){{item.cKfmc || '客服'}}:{{item.cNr}}</div>
        </div>
        <div style="margin: 20px 0;text-align:center;">
          <el-button type="primary" @click="saveRemarkDialog">提交</el-button>
          <el-button @click="cancleRemarkDialog">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
    :visible.sync="collectionData.dialog"
    size="small">
      <div :class="$style.collection">
          <div :class="$style.title">是否确认收藏？</div>
          <div style="margin:30px;">
            <el-input v-model="collectionData.value" placeholder="添加标签" style="width:200px;"></el-input>
            <el-button type="primary" @click="collectionAdd">提交</el-button>
          </div>
          <div style="margin:30px;">
            <div :class="$style.tit">所有标签
              <el-button type="primary" @click="collectionModify()">{{collectionData.modify ? "确认" : "编辑"}}</el-button>
            </div>
            <div style="overflow:hidden">
              <div :class="[$style.tip,{[$style.active]: item.id == collectionData.active }]" v-for="(item,index) in collectionData.options" :key="index">
                <div v-show="collectionData.modify != item.id" @click="activeLabel(item.id)">{{item.bqName}}</div>
                <el-input v-model="item.bqName" placeholder="添加标签" style="width:200px;" v-show="collectionData.modify == item.id" ></el-input>
              </div>
            </div>
            <div style="text-align:center;margin: 30px 0">
              <el-button type="primary" @click="saveCollectionDialog">提交</el-button>
              <el-button  @click="cancleCollectionDialog">取消</el-button>
            </div>
          </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { dateFormat } from 'vux'
export default {
  data() {
    return {
      terms:{
        uType:{
          value: 1,
          opts:[
            {
              label:'用户名',
              value:1,
            },
            {
              label:'真实姓名',
              value:2,
            },
          ]
        },
        HKtype:{
          value:'',
          opts:[
            {
              label:'首次',
              value:1,
            },
            {
              label:'最后',
              value:2,
            },
          ]
        },
        uname:'',
        mobile:'',
        uid:'',
        timeDur:'',
        initChecked:false
      },
      capitalTit: [
        {
          prop: 'id',
          label: 'ID',
          width: '100'
        },
        {
          prop: 'usrcustid',
          label: '贵州银行',
          width: '100'
        },
        // {
        //   prop: 'cU_ser',
        //   label: '用户名',
        //   width: '100'
        // },
        {
          prop: 'cName',
          label: '真实姓名',
          width: '100'
        },
       
        {
          prop: 'tDate',
          label: '注册时间',
          width: '100'
        },
        {
          prop: 'hksj',
          label: '回款时间',
          width: '100'
        },
        {
          prop: 'ftze',
          label: '回款金额',
          width: '100'
        },
        {
          prop: 'cMtel',
          label: '手机号码',
          width: '100'
        },
      ],
      capital: [],
      total: 0,
      pageSize: 10,
      currentPage:1,
      remarkData:{
        id: null,
        dialog: false,
        situation:{
          value:'',
          options:[{
            value: '未接通',
            label: '未接通'
          },{
            value: '暂时无法接通/不在服务区',
            label: '暂时无法接通/不在服务区'
          },{
            value: '无人接听',
            label: '无人接听'
          },{
            value: '电话占线',
            label: '电话占线'
          },{
            value: '关机',
            label: '关机'
          },{
            value: '拒接',
            label: '拒接'
          },{
            value: '意向不明确',
            label: '意向不明确'
          },{
            value: '暂时不需要',
            label: '暂时不需要'
          },{
            value: '在忙自己看或了解',
            label: '在忙自己看或了解'
          },{
            value: '信号不好',
            label: '信号不好'
          },{
            value: '通话背景声噪',
            label: '通话背景声噪'
          },{
            value: '有意向',
            label: '有意向'
          },{
            value: '已充值或投资50以上',
            label: '已充值或投资50以上'
          },{
            value: '预约待回访',
            label: '预约待回访'
          },{
            value: '还没打过电话',
            label: '还没打过电话'
          },{
            value: '暂时不需要',
            label: '暂时不需要'
          },{
            value: '非本人注册',
            label: '非本人注册'
          },{
            value: '刷单或羊毛用户',
            label: '刷单或羊毛用户'
          },{
            value: '接听后挂断',
            label: '接听后挂断'
          },{
            value: '表示没资金或只是注册看看',
            label: '表示没资金或只是注册看看'
          },{
            value: '在忙不接受预约回访',
            label: '在忙不接受预约回访'
          },{
            value: '借款人',
            label: '借款人'
          },{
            value: '朋友介绍',
            label: '朋友介绍'
          },{
            value: '明确表示准备投资',
            label: '明确表示准备投资'
          },{
            value: '有其他平台的投资经历',
            label: '有其他平台的投资经历'
          },{
            value: '对网站红包活动感兴趣，而且提问',
            label: '对网站红包活动感兴趣，而且提问'
          },{
            value: '已绑定银行卡或绑卡失败',
            label: '已绑定银行卡或绑卡失败'
          },{
            value: '用户讲方言',
            label: '用户讲方言'
          },{
            value: '呼叫限制',
            label: '呼叫限制'
          },{
            value: '停机',
            label: '停机'
          },{
            value: '未开通语音通话功能',
            label: '未开通语音通话功能'
          },{
            value: '号码已过期',
            label: '号码已过期'
          }]
        },
        character:{
          value:'',
          options:[{
            value: '平和友善',
            label: '平和友善'
          },{
            value: '中性',
            label: '中性'
          },{
            value: '冷淡',
            label: '冷淡'
          },{
            value: '不友好',
            label: '不友好'
          }]
        },
        preference:{
          value:[],
          options:[{
            value: '平台安全（是否存管、托管）',
            label: '平台安全（是否存管、托管）'
          },{
            value: '喜欢短期标',
            label: '喜欢短期标'
          },{
            value: '喜欢长期标',
            label: '喜欢长期标'
          },{
            value: '对赚取财币感兴趣',
            label: '对赚取财币感兴趣'
          },{
            value: '关注借款项目安全',
            label: '关注借款项目安全'
          },{
            value: '手机操作',
            label: '手机操作'
          },{
            value: '电脑操作',
            label: '电脑操作'
          }]
        },
        feedback:{
          value:[],
          options:[{
            value: '非本人操作',
            label: '非本人操作'
          },{
            value: '不会操作',
            label: '不会操作'
          },{
            value: '操作太复杂',
            label: '操作太复杂'
          },{
            value: '觉得利率有点低',
            label: '觉得利率有点低'
          },{
            value: '在APP上操作遇到bug问题',
            label: '在APP上操作遇到bug问题'
          },{
            value: '债权变现不够灵活，流动性不足',
            label: '债权变现不够灵活，流动性不足'
          }]
        },
        channel:{
          value:[],
          options:[{
            value: '亲戚朋友介绍',
            label: '亲戚朋友介绍'
          },{
            value: '百度等搜索引擎',
            label: '百度等搜索引擎'
          },{
            value: '电视/广播/报纸',
            label: '电视/广播/报纸'
          },{
            value: '社交论坛',
            label: '社交论坛'
          },{
            value: '户外广告',
            label: '户外广告'
          },{
            value: '其他',
            label: '其他'
          }]
        },
        reason:{
          value:[],
          options:[{
            value: '利率太低',
            label: '利率太低'
          },{
            value: '行业动荡，跑路太多',
            label: '行业动荡，跑路太多'
          },{
            value: '不懂P2P理财',
            label: '不懂P2P理财'
          },{
            value: '担心平台安全',
            label: '担心平台安全'
          },{
            value: '不想投资了',
            label: '不想投资了'
          },{
            value: '急用资金周转',
            label: '急用资金周转'
          },{
            value: '投资到其他平台了',
            label: '投资到其他平台了'
          },{
            value: '投不上标',
            label: '投不上标'
          }]
        },
        remarkCont:'',
        history:[
        ],
      },
      collectionData: {
        id: null,
        dialog: false,
        value:"",
        active: null,
        options:[{
          value:'需要进行再次联系的客户'
        },{
          value:'需要进行再次联系的客户'
        }],
        // 判断是编辑还是确认
        modify: null
      },
    }
  },
  computed: {
    userInfo () {
      return this.$store.getters.getUserInfo
    }
  },
  methods: {
   
    prev () {
      if (this.currentPage <= 1) {
        this.currentPage = 1
        this.$toast({
          message: '已经是第一页了'
        })
        return false;
      } else {
        this.currentPage--;
      }
      this.handleCurrentChange(this.currentPage)
    },
    next () {
      if (this.capital.length < 10) {
        this.$toast({
          message: '后面没内容了'
        })
        return false;
      } else {
        this.currentPage++;
      }
      this.handleCurrentChange(this.currentPage)
    },
    // 添加收藏标签
    collectionAdd () {
      if (this.collectionData.value !== '') {
        if (this.collectionData.value === '') {
          this.$message({
            message: '填写后添加',
            type: 'warning'
          });
          return false;
        }
        if (this.collectionData.options.length >= 12) {
          this.$message({
            message: '最多12条',
            type: 'warning'
          });
          return false;
        }
        this.$get(this,{api:'manage/addBq.do',data: {
          bqName:this.collectionData.value
          }
        }).then(({data})=>{
          if (data.state === 0) {
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.collectionData.options.push({bqName:this.collectionData.value,id:this.collectionData.options.length+1})
            this.collectionData.value = "";
          } else {
            this.$toast({
              message: data.message
            })
          }
        })
      } else {
        this.$message({
          message: '请填写内容',
          type: 'warning'
        });
      }
    },
    // 收藏里选中的标签
    activeLabel (i) {
      this.collectionData.active = i;
    },
    // 收藏弹窗
    CollectionDialog(id) {
      console.log('收藏',id)
      this.collectionData.dialog = true;
      this.$get(this,{api:'manage/loadBiaoqs.do',data: {
        fUid:id
      }}).then(({data})=>{
        if (data.state === 0) {
          this.collectionData.id= id;
          console.log('收藏数据',data.content[1].bqName)
          this.collectionData.options = data.content[0];
          this.collectionData.active = data.content[1] ? data.content[1].bqId : null;
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    // 编辑标签
    collectionModify () {
      if (!this.collectionData.modify) {
        this.collectionData.modify = this.collectionData.active;
      } else {
      this.$get(this,{api:'manage/upBq.do',data: {
        id: this.collectionData.active,
        bqName: this.collectionData.options[this.collectionData.active-1].bqName,
      }}).then(({data})=>{
        if (data.state === 0) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.collectionData.modify =null;
        } else {
          this.$toast({
            message: data.message
          })
        }
      })

      }
    },
    // 保存标签
    saveCollectionDialog () {
      if (!this.collectionData.active) {
        this.$message({
          message: '先选择标签',
          type: 'warning'
        });
        return false;
      }
      this.$get(this,{api:'manage/addBqByKUid.do',data: {
        fUid: this.collectionData.id,
        bqId: this.collectionData.active,
      }}).then(({data})=>{
        if (data.state === 0) {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.shoucangSate = data.content
      
          this.capital.forEach((obj)=>{
            if (obj.id === this.collectionData.id) {
              this.collectionData.options.forEach(item=>{
                if(item.id === this.collectionData.active){
                  obj.bqName = item.bqName
                }
              })
              // obj.bqName = this.collectionData.options[this.collectionData.active-1].bqName;
            }
          });
          this.collectionData.dialog =false;
          this.handleSearch()
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    // 备注弹窗
    remarkDialog (id) {
      this.remarkData.dialog = true;
      this.remarkData.id=id;
      this.remarkData.remarkCont = "";
      this.$get(this,{api:'manage/loadState.do',data: {
          fuid:id
      }}).then(({data})=>{
        if (data.state === 0) {
          //客户状态
          this.remarkData.situation.value = data.content.m1 ? String(data.content.m1.cKfState) : '';
          //客户性格
          this.remarkData.character.value = data.content.m1 && data.content.m1.cKhgx;
          // 客户偏好
           this.remarkData.preference.value = data.content.m1 ? data.content.m1.cKhph.split(',') : [];
          //客户反馈
          this.remarkData.feedback.value = data.content.m1 ? data.content.m1.cKhfk.split(',') : [];
          //了解网贷平台的途径
          this.remarkData.channel.value = data.content.m1 ? data.content.m1.cLjtj.split(',') : [];
          //流失原因
          this.remarkData.reason.value = data.content.m2 ? data.content.m2[0].cKfState.split(',') : [];
          // 历史记录
          this.remarkData.history = data.content.m2;
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    // 取消收藏弹窗
    cancleCollectionDialog() {
      this.collectionData.modify = null;
      this.collectionData.dialog = !this.collectionData.dialog;
    },
    // 取消备注弹窗
    cancleRemarkDialog() {
      this.remarkData.value = '';
      this.remarkData.dialog= !this.remarkData.dialog;
    },
    // 保存备注
    saveRemarkDialog() {
      this.$get(this,{api:'manage/saveState.do',data: {
          fuid:this.remarkData.id,
          fKfid: this.userInfo.id,
          cKfState: this.remarkData.situation.value,
          cQQ: this.userInfo.cQQ,
          cKhph: this.remarkData.preference && this.remarkData.preference.value.join(','),
          cKhgx: this.remarkData.character.value,
          cKhfk: this.remarkData.feedback && this.remarkData.feedback.value.join(','),
          cLjtj: this.remarkData.channel.value && this.remarkData.channel.value.join(','),
          cNr: this.remarkData.remarkCont,
          lsyy: this.remarkData.reason.value && this.remarkData.reason.value.join(','),
          groupId: this.userInfo.userGroupId,
      }}).then(({data})=>{
        if (data.state === 0) {
          this.remarkData.dialog= false;
          this.$message({
            message: '提交成功！',
            type: 'success'
          });
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    handleSearch(){
      this.getTableDate(1)
    },
    handleCurrentChange(val) {
      this.getTableDate(val)
    },
    getTableDate(page = 1) {
      const {uType, uname, mobile, uid,timeDur,initChecked} = this.terms
      this.$get(this, {
        api: '/manage/hklb.do', data: {
          groupId: this.userInfo.userGroupId,
          kfid: this.userInfo.id,
          selNameType: this.terms.uType.value,
          userName: this.terms.uname,
          cellphone: this.terms.mobile,
          userId: this.terms.uid,
          payStartDate: this.terms.timeDur && dateFormat(this.terms.timeDur[0], 'YYYYMMDD'),
          payEndDate: this.terms.timeDur && dateFormat(this.terms.timeDur[1], 'YYYYMMDD'),
          Checked: this.terms.initChecked ? 1 : 2,
          pageSize: this.pageSize,
          page
        }
      }).then(({ data }) => {
        if (data.state === 0) {
          if (page == 1) {
            this.total = data.content.num;
          }
          this.capital = data.content
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    }
  },
  mounted() {
    this.getTableDate(1);
  }
}
</script>

<style lang="scss" module>
.header {
  font-size: 14px;
  padding-bottom: 20px;
}
  .remarkBox {
    .title {
      width: 100%;
      border-bottom: 1px solid #dddfe6;
      text-align:center;
      font-size: 24px;
      height: 80px;
      line-height: 80px;
    }
    .detail {
        padding: 20px;
    }
    .history {
      margin-top: 20px;
    }
  }
  .collection {
    .title {
      width: 100%;
      border-bottom: 1px solid #dddfe6;
      text-align: center;
      font-size: 24px;
      height: 80px;
      line-height: 80px;
    }
    .tit {
      margin: 20px 0;
      font-size: 16px;
    }
  }
  .tip {
    background: #9af6c2;
    float: left;
    padding:8px 10px;
    height: 30px;
    line-height: 30px;
    border-radius: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;
  }
  .tip.active {
    background: #ffeb3b;
  }
  .red {
    color: red;
  }
  .yema {
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #d1dbe5;
    color: #48576a;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    border-radius: 10px;
  }
  .click {
    color: #5394fc;
    text-decoration: underline;
    cursor: pointer;
  }
</style>


